import React, { useEffect, useState } from 'react';
import { getMV, getNewMV, getTopMV } from '@/api/recommend'
import { Card } from 'antd';
import newStyle from '@/styles/recommendNew.module.scss'
import { RightOutlined } from '@ant-design/icons'
import { List } from 'antd';
import { useNavigate } from 'react-router-dom';




export default function RecommendMVList() {
  const navigate = useNavigate();

  const toDetail = (id) => {
    navigate(`/recommend/mv/details/${id}`);
  };
  const [MVData, setMVData] = useState([])
  const [newMVData, setNewMVData] = useState([])
  const [topMVData, setTopMVData] = useState([])
// 获取推荐MV数据
  const getMVData = () => {
    getMV().then(res => {   
      setMVData(res.data.result)
    })
  }
  // 获取最新MV数据
  const getNewMVData = () => {
    getNewMV().then(res => {
      setNewMVData(res.data.data)
    })
  }
  // 获取MV排行数据
  const getTopMVData = () => {
    getTopMV().then(res => {
      setTopMVData(res.data.data)
    })
  }

  useEffect(() => {
    getMVData()
    getNewMVData()
    getTopMVData()
  }, [])

  // console.log(topMVData);
  return (
    <>
      {/* 推荐MV */}
      <div style={{ display: 'flex', flexWrap: 'wrap', position: 'relative',left: '10%', marginTop: 50 }}
      >
        <h2 style={{ width: '100%' }}>推荐MV &nbsp;<RightOutlined /></h2>
          {
            MVData && MVData.map((item) => {
              return (
                <Card
                onClick={()=> toDetail(item.id)}
                className={newStyle.MV}
                hoverable
                key={item.id}
                style={{ width: 430, height: 300, display: 'flex' }}
              >
                <img alt="example" src={item.picUrl} />
                <section>{item.name}<span>{item.artists[0].name}</span></section>
                
                </Card >
              )
            })
          }
      </div>
      {/* 最新MV */}
      <div style={{ display: 'flex', flexWrap: 'wrap', position: 'relative', left: '10%', marginTop: 50 }}
      >
        <h2 style={{ width: '100%' }}>最新MV &nbsp;<RightOutlined /></h2>
          {
            newMVData && newMVData.map((item) => {
              return (
                <Card
                onClick={()=> toDetail(item.id)}
                className={newStyle.MV}
                hoverable
                key={item.id}
                style={{ width: 430, height: 300, display: 'flex' }}
              >
                <img alt="example" src={item.cover} />
                <section>{item.name}<span>{item.artists[0].name}</span></section>
                
                </Card >
              )
            })
          }
      </div>
      {/* MV排行 */}
      <div>
        <h2 style={{ width: '100%', position: 'relative', left: '10%', marginTop:20 }}>MV排行 &nbsp;<RightOutlined /></h2>
        <List
          className={newStyle.MVTop}
          style={{ width: 850, position: 'relative', left: '15%', marginTop:30}}
          size="small"
          dataSource={topMVData}
          renderItem={(item,i) => (
            <List.Item
              onClick={() => toDetail(item.id)}
              key={item.id}
            >
              <div style={{ width: 80 }}>
                {i < 9 ? '0' + (i + 1) : i + 1}
              </div>
              <img
                style={{width:240,margin:5,borderRadius:15,cursor:'pointer'}} 
                alt="logo"
                src={item.cover}
              />
              <section style={{lineHeight:'100%'}}>{item.name}</section>
              <p style={{ lineHeight: '100%' }}>{item.artists[0].name}</p>
              

            </List.Item>
          )}
        />
      </div>

    </>
  )
}
